<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .btn {
            width: 200px;
            height: 40px;
            border: none;
            background: rgba(207,34,34,0.767);
            color : #fff;
        }

        .opacity {
            opacity: .5;
        }
    </style>
</head>
<body>
    <div id="app">
        <input v-model="val" type="text">
        <span @click="clear" v-show="flag">X</span>

        <div>
            <!-- <div :class="count === index? 'as': ''"></div> -->
            <!-- <div :class="{
                active: 
            }"></div> -->

            <button :disabled="isDisable" @click="login" :class="{
                btn: true,
                opacity: isDisable
            }">登录</button>
        </div>
    </div>

    <script src="./vue.js"></script>

    <script>
        new Vue ({
            el : "#app" ,
            data : {
                val : "",
                flag : false ,
                isDisable : true
            },
            methods : {
                clear() {
                    this.val = ""
                },
                login() {
                    console.log("可以点击了");
                }
            },
            watch : {
                val(newValue) {
                    if (newValue.length > 0){
                        this.flag = true
                        if (newValue.length === 11){
                            this.isDisable = false
                        } else {
                            this.isDisable =  true
                        }
                    } else {
                        this.falg = false
                        this.isDisable = true
                    }
                }
            }
        })
    </script>
</body>
</html>